<template>
  <div class="zw_table">
    <el-table style="width: 100%" ref="tableRef" :data="prop.tableData" @selection-change="sectionChange" @select-all="selectAll" height="450" max-height="550" tooltip-effect="light" header-row-class-name="table_header_title">
      <el-table-column v-if="prop.tableParams.selection" type="selection" width="50px" align="center"></el-table-column>
      <el-table-column v-for="item in prop.tableParams.tabH" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align || 'center'" :formatter="item.formatter" :show-overflow-tooltip="item.showTip || false">
        <template #default="scope">
          <template v-if="item.isTag">
            <el-popover placement="top" :width="400" trigger="hover" popper-class="popper">
              <template #reference>
                <div class="tags_con">
                  <div class="tags_box">
                    <div class="table_tag" :class="{ high_light: item.highlight }" v-for="item in scope.row[item.prop]" :key="item.id">
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="tag_total">
                    共<span>{{ scope.row[item.prop].length }}</span
                    >个
                  </div>
                </div>
              </template>
              <div class="pop_dialog">
                <div class="table_tag" :class="{ high_light: item.highlight }" v-for="item in scope.row[item.prop]" :key="item.id">
                  {{ item.name }}
                </div>
              </div>
            </el-popover>
          </template>
          <!-- 朋友圈素材 -->
          <template v-else-if="item.friendType">
            <slot :row="scope.row" :item="item"></slot>
          </template>
          <template v-else-if="item.image">
            <img class="img" :src="scope.row[item.prop]" alt="" />
          </template>
          <div v-else-if="item.action">
            <el-button type="text" v-for="v in item.fn" :key="v.id" @click="v.click(scope.row)">{{ v.name }}</el-button>
          </div>
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
      <template #empty>
        <img class="emty_img" src="@/assets/noData.png" alt="" />
        <div class="emty_title">{{ prop.emtyText || '暂无数据' }}</div>
      </template>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue'
  import { useStore } from '@/store'
  const store = useStore()

  const prop = defineProps<{
    tableData: []
    tableParams: {
      type: Object
    }
    emtyText: {
      type: String
      default: '暂无数据'
    }
  }>()
  const sectionChange = (selection: any) => {
    store.dispatch('table', {
      tableData: selection
    })
  }
  const selectAll = (selection: any) => {
    store.dispatch('table', {
      tableData: selection,
      tableAll: true
    })
  }
</script>
<style lang="scss" scoped>
  .zw_table {
    margin: 0 20px;
    .tags_con {
      margin: auto;
      width: 350px;
      align-items: center;
      display: flex;
      .tags_box {
        text-align: left;
        width: 280px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .tag_total {
        flex: 1;
        span {
          color: #ff6b00;
        }
      }
    }
    .img {
      width: 80px;
    }

    .table_tag {
      display: inline-block;
      color: #969696;
      padding: 4px 10px;
      background: #ffffff;
      border: 1px solid #eaeaea;
      margin: 5px;
    }
    .high_light {
      border: 1px solid #ff6b00;
      color: #ff6b00;
    }
    .emty_img {
      transform: translateX(15%);
    }
    .emty_title {
      margin-top: -50px;
    }
  }
</style>
<style lang="scss">
  .table_header_title {
    height: 60px;
    th.el-table__cell {
      background: #f9f9f9;
      padding: 10px 0;
    }
  }
  .popper {
    .pop_dialog {
      display: flex;
      flex-wrap: wrap;
      .table_tag {
        color: #969696;
        padding: 4px 10px;
        background: #ffffff;
        border: 1px solid #eaeaea;
        margin-right: 16px;
        margin-bottom: 10px;
      }
      .high_light {
        border: 1px solid #ff6b00;
        color: #ff6b00;
      }
    }
  }
</style>
